export default {
    data() {
        return {
            cadTheme: {
                axisColor: '#333',      // 轴线颜色
                guideLineColor: '#666', // 辅助线颜色
                textColor: '#222',      // 文字颜色
                arrowSize: 8,           // 箭头大小
                fontSize: 12           // 标注文字大小
            }
        }
    },
    methods: {
        createArrow([x, y], angle) {
            return {
                type: 'line',
                shape: {
                    x1: x,
                    y1: y,
                    x2: x + Math.cos((angle - 30) * Math.PI / 180) * this.cadTheme.arrowSize,
                    y2: y + Math.sin((angle - 30) * Math.PI / 180) * this.cadTheme.arrowSize,
                },
                style: {
                    stroke: this.cadTheme.axisColor,
                    lineWidth: 1.5
                }
            }
        },
        /**
         *
         * @param start 起点
         * @param end 终点
         * @param offset 标注位置偏移量
         * @param text 标注文字
         * @param isVertical 垂直模式
         * @returns {{type: string, children: []}}
         */
        createDimensionLine(start, end, offset, text, isVertical = false) {
            const [x1, y1] = start
            const [x2, y2] = end
            const angle = isVertical ? 90 : 0

            return {
                type: 'group',
                children: [
                    {
                        type: 'line',
                        shape: { x1, y1, x2, y2 },
                        style: {
                            stroke: this.cadTheme.axisColor,
                            lineWidth: 1.2
                        }
                    },
                    {
                        type: 'text',
                        style: {
                            text,
                            fill: this.cadTheme.textColor,
                            fontSize: this.cadTheme.fontSize,
                            textAlign: 'center',
                            fontWeight: 'bold',
                        },
                        rotation: isVertical ? 4.7 : 0,
                        position: isVertical
                            ? [x1 + offset, (y1 + y2) / 2]
                            : [(x1 + x2) / 2, y1 + offset]
                    },
                    // 箭头（起点）
                    this.createArrow(start, angle),
                    this.createArrow(start, angle + 60),
                    // 箭头（终点）
                    this.createArrow(end, angle - 120),
                    this.createArrow(end, angle + 180),
                ]
            }
        },
        // 动态计算标注线位置
        getDimensionLines() {
            const cWidth = this.myChart.getWidth()
            const cHeight = this.myChart.getHeight()
            const offset = 15

            const [
                yAxisMinVal,
                yAxisMaxVal
            ] = this.myChart.getModel().getComponent('yAxis').axis.scale._extent
            const yAxisMinCoor = this.myChart.convertToPixel('grid', [0, yAxisMinVal])
            const yAxisMaxCoor = this.myChart.convertToPixel('grid', [0, yAxisMaxVal])
            const chartH = Math.abs(yAxisMaxCoor[1] - yAxisMinCoor[1])

            return [
                // X轴标注线
                this.createDimensionLine(
                    [cWidth * 0.1, cHeight - offset],
                    [cWidth * 0.9, cHeight - offset],
                    -15,
                    '2500'
                ),
                // Y轴标注线
                this.createDimensionLine(
                    [cWidth - offset, cHeight - chartH - 35],
                    [cWidth - offset, cHeight - 35],
                    15,
                    '2200',
                    true
                ),
                {
                    type: 'polygon',
                    shape: {
                        points: [
                            [cWidth * 0.1, cHeight - 35],
                            [cWidth * 0.1, cHeight - 35 - 12],
                            [cWidth * 0.1 + 12, cHeight - 35]
                        ]
                    },
                    style: {
                        fill: '#c0504d',
                        stroke: '#c0504d',
                        lineWidth: 1
                    },
                }
            ]
        },
        truncateText(text, maxLength = 30) {
            return text && text.length > maxLength ? text.substr(0, maxLength) + '...' : text;
        },
        getScatterOptions(gatherData, normalData) {
            return {
                grid: {
                    top: "10%",
                    bottom: "10%",
                    left: "10%",
                    right: "10%",
                    // top: 90,
                    // bottom: 35,
                    // width: "73.84%",
                    // height: "65%",
                },
                // title: {
                //   text: this.truncateText(this.chartData.title),
                //   left: 'center',
                //   triggerEvent: true
                // },
                legend: {
                    show:true,
                    top: 25,
                },
                tooltip: {
                    trigger: 'item',
                    formatter: (params) => {
                        return (params.value[2] && params.value[3]) ?
                            `<div>Panel坐标(${params.value[2]},${params.value[3]})</div><div>GLS坐标(${params.value[0]},${params.value[1]})</div>` :
                            `<div>GLS坐标(${params.value[0]},${params.value[1]})</div>`
                    }
                },
                xAxis: [
                    {
                        type: 'value',
                        axisLine: { show: true, onZero: false },
                        axisTick: { show: false },
                        axisLabel: { show: false },
                        min: -1250,
                        max: 1250,
                        interval: 250,
                    },
                    {
                        type: 'value',
                        axisLine: { show: true, onZero: false },
                        axisTick: { show: false },
                        axisLabel: { show: false },
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLine: { show: true, onZero: false },
                        axisTick: { show: false },
                        axisLabel: { show: false },
                        interval: 220,
                        min: -1100,
                        max: 1100,
                    },
                    {
                        type: 'value',
                        axisLine: {
                            show: true,
                            onZero: false
                        },
                        axisTick: { show: false },
                        axisLabel: { show: false },
                    }
                ],
                series: [
                    {
                        name: '聚集坐标',
                        type: 'scatter',
                        data: gatherData,
                        symbolSize: 5,
                        itemStyle: { opacity: 0.4, color: '#13AFBA' },
                        blendMode: 'source-over',
                        large: true,
                        largeThreshold: 500
                    },
                    {
                        name: '正常坐标',
                        type: 'scatter',
                        data: normalData,
                        symbolSize: 5,
                        itemStyle: { opacity: 1, color: '#0081FF' },
                        blendMode: 'source-over',
                        large: true,
                        largeThreshold: 500
                    }
                ]
            }
        },
    }
}
